<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>PetShop后台管理系统</title>
    <style>
        body {
            margin: 0;
            background-image: url("images/445296.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            text-align: center;
        }
        #p1{
            word-wrap: break-word;
            word-break: normal;
            font-family: 幼圆;
            font-weight: bold;
            font-size: 25px;
        }
        .logo {
            position: absolute;
            width: 230px;
            display: block;
            top: 25px;
            text-align: left;
            left: 30px;
        }

        .sur {
            position: absolute;
            width: 200px;
            line-height: 10px;
            text-align: right;
            font-family: 幼圆;
            font-weight: bold;
            font-size: 10px;
            right: 25px;
            top: 0;
        }

    </style>
</head>

<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 100%;height: 67px;">
            <a href="/login.html" class="logo">
                <img src="./images/logob.png" alt=""/>
            </a>
                <div>
                    <el-button type="text" class="sur" @click="surprise(0)">
                        <i style="vertical-align: middle" class="el-icon-star-off"></i>
                        <span>小惊喜~</span>
                    </el-button>
                </div>

        </div>
        </el-header>

        <el-main>
            <el-card style="width: 600px;height:300px;margin: 0 auto;background-color: rgba(255,255,255,0.3)">
                <el-form style="width: 400px;margin: 30px auto">
                    <el-form-item>
                        <p id="p1"></p>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-main>

        <el-footer>
            <el-card id="ss"style="display: none;width: 600px;height:300px;margin: 0 auto;background-color: rgba(255,255,255,0.3)">
            <el-form style="width: 400px;margin: 30px auto" label-width="60px">
                <div >
                    <el-form-item label="用户名">
                        <el-input type="text" placeholder="请输入用户名" v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="position: relative;right: 30px" type="primary" @click="login()">登录</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </el-card>
        </el-footer>
    </el-container>
</div>

</body>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<script>
    function show() {
        document.getElementById("ss").style.display="block";
    }

    window.onload=function (){
        const pp = document.querySelector("#p1");
        const str = "这里是PetHome后台管理系统，欢迎您的使用，不过，要想正常使用管理功能，请先登录哦~";
        let n = 0;
        let timer;
        timer = setInterval(function () {
            if (n < str.length) {
                pp.innerHTML += str.charAt(n);
                n++;
            } else {
                if(n === str.length){
                    show();
                }
                clearInterval(timer);
            }
        }, 100)
    }
</script>

<script>
    function surprise(i) {
        document.getElementById('p1').innerHTML = '';
        const pp = document.querySelector("#p1");
        const str = new Array();
        str[0] = "这里没有惊喜哦~上当啦，小笨蛋~";
        str[1] = "看样子是账号输错了哦~";
        str[2] = "再检查检查密码哦~";
        let n = 0;
        let timer;
        timer = setInterval(function () {
            if (n < str[i].length) {
                pp.innerHTML += str[i].charAt(n);
                n++;
            } else {
                clearInterval(timer);
            }
        }, 100)
    }

    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    username: "",
                    password: ""
                },
            }
        },
        methods: {
            login(){
                axios.post("http://localhost:8847/admins/login",v.user).then(function (response){
                    let json = response.data;
                    console.log(json)
                    if (json.code==200){
                        let jwt = json.data;
                        localStorage.setItem("jwt",jwt);
                        location.href="/adminList.html";
                        return;
                    }else if(json.code==2){
                        surprise(1);
                    }else{
                        surprise(2);
                    }
                })
            }
        }
    })
</script>
</html>